<template>
  <div class="box">
    <van-nav-bar title="CINV综合管理信息" @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right" src="@/assets/img/down_left.png" alt="" />
      </template>
    </van-nav-bar>

    <!-- 顶部按钮 -->
    <div class="start" style="margin-top: 16px" @click="scoring">
      <img src="@/assets/img/blue_press.png" alt="" />
      查看综合评估内容
    </div>

    <div class="title">
      <span class="i"></span>
      <span>CINV风险评估</span>
    </div>

    <!-- 评估 -->
    <AssessModule :cinvInfo="info"></AssessModule>

    <div class="title" v-if="info.yao_fang">
      <span class="i"></span>
      <span>CINV用药处方</span>
    </div>
    <!-- 用药处方 -->
    <div class="prescription" v-if="info.yao_fang">
        <PrescriptionCard :prescriptionList="info.yao_fang"></PrescriptionCard>
    </div>
    <div class="title" v-if="info.outu_list">
      <span class="i"></span>
      <span>恶心呕吐情况</span>
    </div>
    <!-- 恶心呕吐情况 -->
    <div class="nausea" v-if="info.outu_list">
      <div class="item" @click="nauseaDetail(item)" v-for="(item, index) in info.outu_list" :key="index">
        <span class="circular" v-if="item.color === 'red'">{{info.outu_list.length - index}}</span>
        <span class="circular" style="background-color: #45AE8B" v-if="item.color === 'green'">{{info.outu_list.length - index}}</span>
        <span class="circular" style="background-color: #FFC901" v-if="item.color === 'yellow'">{{info.outu_list.length - index}}</span>
        <span>{{item.date}}</span>
        <button>查看</button>
      </div>
    </div>
      <!-- 弹出层 -->
      <van-popup  v-model="nauseaShow">
        <h1>化疗后恶心呕吐情况调查表</h1>
        <p class="explain">恶心呕吐情况收集说明：请您每天记录恶心呕吐情况。您 填写的准确性及频繁性将影响您的下次治疗，请务必如实 填写，非常感谢！</p>
        <div class="detail">
            <div class="time">2021/6/18 15:00</div>
            <div class="ask">1.您今天是否有呕吐的发生？</div>
            <div class="answer">{{nauseaInfo.vomit === '1' ? '是' : '否'}}</div>
             <div class="ask">2.您今天出现几次呕吐？（间隔至少5分钟）</div>
            <div class="answer">{{nauseaInfo.vomit_number || 0}}</div>
             <div class="ask">3.您是否有恶心的感觉(含食欲不佳）</div>
            <div class="answer">{{nauseaInfo.nausea === '1' ? '是' : '否'}}</div>
             <div class="ask">4.如果您有恶心的情况，恶心严重程度是多少？ (0-10数字，越大程度越高)</div>
            <div class="answer">{{nauseaInfo.nausea_degree || 0}}</div>
             <div class="ask">5.您今天是否正常排便？若有请填写几次</div>
            <div class="answer">{{nauseaInfo.defecation === '1' ? '是' : '否'}}</div>
             <div class="ask">6.您今天是否发生腹泻？(至少间隔5分钟),若有请 填写几次</div>
            <div class="answer">{{nauseaInfo.defecation_number || 0}}</div>
        </div>
        <button class="x" @click="nauseaShow=false"> 关闭</button>
      </van-popup>
  </div>
</template>
<script>
import AssessModule from '@/views/components/AssessModule'
import PrescriptionCard from '@/views/components/PrescriptionCard'
import { vomitDetail } from '@/api/medical'
export default {
  components: { PrescriptionCard, AssessModule },
  data () {
    return {
      info: {
        yao_fang: [],
        risk: ''
      },
      nauseaShow: false,
      nauseaInfo: {}
    }
  },
  mounted () {
    this.vomitDetail()
  },
  methods: {
    scoring () {
      this.$router.push({
        path: '/user/scoring',
        query: {
          data: this.info
        }
      })
    },
    // 报告恶心呕吐患者
    async vomitDetail () {
      const { data, code, msg } = await vomitDetail({
        id: this.$route.query.id,
        date: this.$route.query.date
      })
      if (code !== 1) return this.$toast.falil(msg)
      this.info = data
      this.info.yao_fang = JSON.parse(data.cinv_prescription)
      this.info.outu_list = JSON.parse(data.vomiting)
    },
    // 恶心呕吐情况查看
    nauseaDetail (item) {
      this.nauseaShow = true
      this.nauseaInfo = item
    }
  }
}
</script>
<style scoped lang='less'>
// 开始
.start {
  margin-top: 640px;
  // width: 343px;
  height: 44px;
  // background: linear-gradient(180deg, #3dcb8d 0%, #09b996 100%);
  // background-color: red;
  border: 1px solid #4182ff;
  color: #4182ff;
  border-radius: 8px;
  text-align: center;
  line-height: 46px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  img {
    width: 13px;
    height: 15px;
    margin-right: 3px;
    vertical-align: middle;
  }
}
.title {
  width: 100%;
  .i {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    opacity: 1;
  }
  span {
    display: inline-block;
    height: 22px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #4182ff;
    opacity: 1;
  }
}
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  padding: 10px 16px;
  padding-top: 40px;
  box-sizing: border-box;

  // 用药处方
  .prescription {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 5px;
  }
  .nausea {
    width: 100%;
    // height: 163px;
    background: #ffffff;
    border: 1px solid rgba(112, 112, 112, 0.23137254901960783);
    border-radius: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    padding-bottom: 5px;
    box-sizing: border-box;
    .item {
      width: 100%;
      margin-bottom: 10px;
      span {
        display: inline-block;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 600;
        vertical-align: middle;
        // line-height: 30px;
        color: #161616;
      }
      .circular {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
        background-color: #ed4c4d;
        margin-right: 6px;
      }
      .active_c2 {
        background-color: #ffc901;
      }
      .active_c1 {
        background-color: #45ae8b;
      }
      button {
        width: 39px;
        height: 17px;
        background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
        border-radius: 9px;
        font-size: 12px;
        vertical-align: middle;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        border: none;
        margin-left: 8px;
      }
    }
  }
}
     /deep/.van-popup{
    width: 85%;
    padding: 20px 18px;
    box-sizing: border-box;
    border-radius: 8px;
    h1{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 22px;
      color: #161616;
      text-align: center;
     }
     .explain{
       font-size: 11px;
       font-family: PingFang SC;
       font-weight: 400;
       line-height: 15px;
       color: #ED4C4D;
       margin: 10px auto;
       letter-spacing: 1px;
     }
      .detail{
        width: 100%;
        border-top: 1px solid rgba(112, 112, 112, 0.1843137254901961);
        .time{
          font-size: 14px;
          margin-top: 6px;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 20px;
          color: #161616;
          opacity: 0.5;
        }
        .ask{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #161616;
          margin: 4px auto;
        }
        .answer{
          margin: 4px auto;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #4182FF;
        }
      }
      .x{
        display: block;
        width: 80%;
        height: 48px;
        background: linear-gradient(90deg, #3EB3FF 0%, #436EFF 100%);
        box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
        border-radius: 45px;font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        margin: 18px auto;
        border: none;
        line-height: 22px;
        color: #FFFFFF;
      }
  }
</style>
